<template>
  <div class="wty-content">
    <div class="wty-wrapper">
      <div class="wty-c-header">
        <div class="wty-c-header-left">
          <span class="iconfont icon-NMStubiao-"></span>
          <span class="text"> 所有拼图(共{{ users.length }}个) </span>
        </div>
        <div class="wty-c-header-right">
          <div class="info">
            <span class="iconfont icon-tianjia"></span>
            <span class="text">添加拼图</span>
          </div>
        </div>
      </div>
      <div class="wty-c-table">
        <table class="wty-tab" cellspacing="0">
          <!--cellspacing:单元格间距-->
          <thead>
            <tr>
              <th></th>
              <th>编码</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in userList" :key="user.id">
              <td>
                <input
                  :id="'user-' + user.id"
                  type="checkbox"
                  :value="user.id"
                  v-model="userIDs"
                />
              </td>
              <td>
                <label class="wty-label" :for="'user-' + user.id">
                  {{ user.id }}
                </label>
              </td>
              <td>
                <label class="wty-label" :for="'user-' + user.id">
                  {{ user.name }}
                </label>
              </td>
              <td>
                <label class="wty-label" :for="'user-' + user.id">
                  {{ user.age }}
                </label>
              </td>
              <td>
                <div class="caozuo">
                  <el-button
                    @click="_editOne(user.id)"
                    type="success"
                    plain
                    icon="el-icon-edit"
                    >编辑</el-button
                  >
                  <el-button
                    @click="_deleteOne(user.id)"
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    >删除</el-button
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="wty-c-foot">
        <div class="wty-c-foot-left">
          <div class="wty-foot-all">
            <input type="checkbox" id="wty-all" v-model="itemsAll" />
            <label for="wty-all"></label>
          </div>
          <div class="wty-c-foot-deleteButton">
            <el-button
              @click="_deleteAll"
              type="danger"
              plain
              icon="el-icon-delete"
              >删除所有</el-button
            >
          </div>
        </div>
        <div class="wty-c-foot-right">
          <div class="wty-c-foot-pageInfo">
            <el-button
              @click="_lastPage"
              icon="el-icon-arrow-left"
              circle
            ></el-button>
            <span>
              {{ currentIndex }}
            </span>
            <span>/</span>
            <span>
              {{ totalPage }}
            </span>
            <el-button
              @click="_nextPage"
              icon="el-icon-arrow-right"
              circle
            ></el-button>
          </div>
          <div class="wty-c-foot-input">
            <input type="text" v-model="inputIndex" />
          </div>
          <div class="wty-c-foot-skipButton-">
            <el-button
              type="primary"
              plain
              icon="el-icon-s-promotion"
              class="wty-c-f-goto"
              @click="_goto"
              >跳转</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      users: [],
      userIDs: [],
      currentIndex: 1,
      count: 5,
      inputIndex: "",
      itemsAll: false
    };
  },
  watch: {
    // 监听属性，一个值导致多个值改变 全选
    itemsAll(newValue, oldValue) {
      let vm = this;
      if (newValue) {
        this.userList.map(user => {
          vm.userIDs.push(user.id);
        });
      } else {
        this.userIDs = [];
      }
    }
  },
  computed: {
    // 计算属性，多个值导致一个值改变
    userList() {
      let start = (this.currentIndex - 1) * this.count;
      let end = this.currentIndex * this.count;
      let userList = this.users.slice(start, end);
      return userList;
    },
    totalPage() {
      let len = this.users.length;
      return Math.ceil(len / this.count);
    }
  },
  methods: {
    _lastPage() {
      this.currentIndex = Math.max(--this.currentIndex, 1);
    },
    _nextPage() {
      this.currentIndex = Math.min(++this.currentIndex, this.totalPage);
    },
    _editOne(userID) {
      let user = this.users.filter(u => {
        return u.id === userID;
      });
      alert(JSON.stringify(user[0])); // 数组转成json
    },
    _deleteOne(userID) {
      let url = `${this.global.basePath}/user/${userID}`;
      Axios.delete(url);
      this._initUser();
    },
    _initUser() {
      let url = `${this.global.basePath}/user`;
      let vm = this; // 记笔记
      Axios.get(url).then(function(resp) {
        vm.users = resp.data;
      });
    },
    _goto() {
      let index = parseInt(this.inputIndex);
      if (index >= 1 && index <= this.totalPage) {
        this.currentIndex = index;
      }
    },
    _deleteAll() {
      // 方法要绑定按钮
      alert(this.userIDs);
    }
  },
  created() {
    // 加载数据
    this._initUser();
  }
};
</script>

<style lang="scss" scoped>
.wty-content {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 12px;
  color: #666666;
  .wty-wrapper {
    position: absolute;
    top: 0;
    left: 20px;
    right: 40px;
    bottom: 40px;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px 40px 10px 40px;
    display: flex;
    flex-direction: column;
    .wty-c-header {
      flex: 0 0 60px;
      height: 60px;
      display: flex;
      .wty-c-header-left {
        flex: 1;
        display: flex;
        .icon-NMStubiao- {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }
        .text {
          height: 60px;
          line-height: 60px;
        }
      }
      .wty-c-header-right {
        flex: 1;
        height: 60px;
        line-height: 60px;
        text-align: right;
        .info {
          .text {
            margin-left: 10px;
            margin-right: 40px;
          }
        }
      }
    }
    .wty-c-table {
      flex: 1;
      .wty-tab {
        width: 100%;
        text-align: center; // 内容居中
        tbody tr:nth-child(2n),
        thead tr {
          background-color: rgb(216, 216, 216);
        }
        tbody tr,
        thead tr {
          height: 40px;
          line-height: 40px;
        }
        thead > tr > th:first-child {
          width: 40px;
        }
        thead > tr > th:nth-child(2) {
          width: 50px;
        }
        thead > tr > th:last-child {
          // thead下tr下的th的最后一个列宽
          width: 200px;
        }
        tbody {
          label {
            display: block;
            height: 100%;
          }
        }
      }
    }
    .wty-c-foot {
      display: flex;
      flex: 0 0 50px;
      height: 50px;
      justify-content: space-between;
      .wty-c-foot-left {
        display: flex;
        height: 50px;
        line-height: 50px;
        .wty-foot-all {
          label:before {
            margin-right: 20px;
            content: "全选";
          }
        }
      }
      .wty-c-foot-right {
        display: flex;
        height: 50px;
        line-height: 50px;
        .wty-c-foot-input input {
          margin: 0 10px;
          outline: none;
          border: none;
          padding: 5px 5px;
          font-size: 10px;
          border: 1px solid #eeeeee;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
